<template>
  <div class="supplier-log">
    <Title :title="'操作日志'" style="margin-bottom:16px;"/>
    <div v-if="logListData && logListData.length">
      <log-time-line :logs="logList" :edit-api="handleEdit" :class="{'mobile-log-time-line':showMobilePage}" :show-detail-time="!showMobilePage" @success="getList"/>
      <div v-if="logsNum > 3" class="log-open-btn" @click="logOpen = !logOpen"> {{ logOpen?'收起':'展开' }}全部记录<i :class="logOpen?'el-icon-arrow-up':'el-icon-arrow-down'"/></div>
    </div>
    <div v-else class="empty-container">
      <img :src="emptyImg" alt="">
      <div class="empty-text">暂无操作日志</div>
    </div>
  </div>
</template>
<script>
import { logList, logRemarkEdit } from '@/api/flyNotice';
import Title from '@/components/Title';
import emptyIcon from '@/assets/home/emptyIcon.png';
import { hasRouteAuth } from '@/utils/permission';
import { mapState } from 'vuex';
import LogTimeLine from './logTimeLine';
import emptyImg from '@/assets/empty-table-data.png';

export default {
  components: { Title, LogTimeLine },
  props: {
    id: {
      type: Number,
      default: null
    },
    isDisabled: { // 编辑状态无法修改备注
      type: Boolean,
      default: false
    },
    isUpdate: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      emptyImg,
      emptyIcon,
      logsNum: 0,
      logOpen: false,
      logListData: []
    };
  },
  computed: {
    ...mapState({
      'userInfo': state => state.user.userInfo,
      'showMobilePage': state => state.app.showMobilePage
    }),
    logList() {
      const logListClone = _.cloneDeep(this.logListData);
      if (this.logOpen || this.logsNum <= 3) {
        return this.handleData(logListClone);
      }
      return this.handleData(logListClone.slice(0, 3));
    }
  },
  watch: {
    isUpdate() {
      this.getList();
    }
  },
  created() {
    this.getList();
  },
  methods: {
    hasRouteAuth,
    updateInfo() {
      this.getList();
    },
    getList() {
      if (!this.id || isNaN(this.id)) {
        process.env.ENV_FORMAL && console.log('无效询单id');
        return;
      }
      this.listLoading = true;
      logList({ id: this.id }).then(res => {
        if (res.code === 200) {
          // 接口数据字段名称不一致，需要做转换
          this.logsNum = res.data.items.length;
          this.logListData = res.data.items;
        } else {
          this.$message.error(res.message);
        }
      }).catch(err => {
        console.error(err);
      });
    },
    handleData(data) {
      const res = [];
      data.forEach(item => { // 转换key值
        item.opeatorUser = item.operator;
        item.opeatorUserId = item.userId;
        item.remarks = item.remark;
        item.time = Number(item.time) * 1000;
        item.operationTime = this.getStartTime(item.time);
        const resItem = res.find(i => {
          return i.operationTime === item.operationTime;
        });
        if (!resItem) {
          res.push({
            operationTime: item.operationTime,
            operations: [item]
          });
        } else {
          resItem.operations.push(item);
        }
      });
      return res;
    },
    // 获取指定时间0点
    getStartTime(time) {
      const nowTimeDate = new Date(time);
      return nowTimeDate.setHours(0, 0, 0, 0);
    },
    handleEdit(data) {
      return new Promise((resolve, reject) => {
        if (data.remark !== '' && data.remark.length > 500) {
          this.$message({ type: 'warning', message: '请输入小于500个字的备注' });
          reject();
        } else {
          logRemarkEdit(data).then(res => {
            resolve(res);
          });
        }
      });
    }
  }
};
</script>
<style lang="scss" scoped>
.supplier-log {
  margin-bottom: 50px;
  .log-open-btn {
    display:flex;
    justify-content:center;
    color: #333333;
    font-size:14px;
    cursor: pointer;
    align-items: center;
    margin-top: 10px;
    i {
      margin-left: 8px;
    }
  }
  .empty-container {
    text-align: center;
    position: relative;
    margin-top: 20px;
    img {
      width: 90px;
    }
    .empty-text {
      color: #999;
      max-width: 300px;
      font-size: 14px;
      margin: 0 auto;
    }
  }
  .mobile-log-time-line {
    &::v-deep {
      .el-timeline-item__content {
        overflow: auto;
        .detail {
          .ellipsis {
            overflow: unset;
          }
        }
      }
    }
  }
}
</style>
